<template>
    <div>
        <Search />
        <ChartLine class="bottom10" ref='chartLin1' :yMax='100' yUnit='ms' title="云端服务整体性能趋势（可用性）" :seriesData='arriveDataList' :xName='lossXName' :legendName="lossLegendName"></ChartLine>
        <ChartLine class="bottom10" ref='chartLin2' :yMax='100' yUnit='ms' title="云端服务整体性能趋势（网络时延）" :seriesData='asdDataList' :xName='lossXName' :legendName="lossLegendName"></ChartLine>
        <ChartLine :yMax='100' ref='chartLin3' yUnit='%' title="云端服务整体性能趋势（丢包率）" :seriesData='lossDataList' :xName='lossXName' :legendName="lossLegendName"></ChartLine>
        <el-card class="box-card">
            <span>汇总数据</span>
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, onUnmounted } from 'vue';
import ChartBar from 'comps/chart/bar/index.vue';
import Search from 'comps/search/index.vue';
import ChartLine from 'comps/chart/line/index.vue';
import ETable from 'comps/eTable/index.vue';
import bus from 'utils/mitt';
export default defineComponent({
    name: 'cloudServiceMonitor',
    components: { Search, ChartBar, ChartLine, ETable },
    setup() {
        /** 到达率*/
        const arriveDataList: Array = reactive([
            {
                name: '云端大脑服务',
                data: [100, 100, 100, 100, 50, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '语音服务',
                data: [100, 100, 100, 100, 100, 100, 50, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '客服服务',
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 50, 100, 100, 100, 100, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            }
        ]);
        /** 丢包*/
        /** 网络时延*/

        const lossDataList: Array = reactive([
            {
                name: '云端大脑服务',
                data: [82, 93, 90, 93, 50, 60, 70, 82, 93, 90, 93, 50, 60, 70, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '语音服务',
                data: [72, 63, 80, 83, 40, 50, 60, 72, 63, 80, 83, 40, 50, 60, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '客服服务',
                data: [62, 53, 70, 73, 50, 60, 40, 62, 53, 70, 73, 50, 60, 40, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            }
        ]);
        const asdDataList: Array = reactive([
            {
                name: '云端大脑服务',
                data: [82, 93, 90, 93, 50, 60, 70, 82, 93, 90, 93, 50, 60, 70, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '语音服务',
                data: [72, 63, 80, 83, 40, 50, 60, 72, 63, 80, 83, 40, 50, 60, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            },
            {
                name: '客服服务',
                data: [62, 53, 70, 73, 50, 60, 40, 62, 53, 70, 73, 50, 60, 40, 100, 100, 100],
                type: 'line',
                smooth: true,
                symbol: 'none'
            }
        ]);
        const lossXName = ref(['2009/6/12 1:01', '2009/6/12 1:40', '2009/6/12 1:56', '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00']);
        const lossLegendName = ref(['云端大脑服务', '语音服务', '客服服务']);
        /**汇总数据 */
        const tableConfig = reactive(
            //表格配置
            {
                thead: [
                    { lable: '应用服务', prop: 'data' },
                    { lable: '可用性(%)', prop: 'dd' },
                    { lable: '网络时延(ms)', prop: 'wl' },
                    { lable: '丢包率(%)', prop: 'db' }
                ]
            }
        );
        const tableData = reactive([
            {
                data: '云端大脑服务(127.123.12.12)',
                dd: '98.6',
                wl: '38.26',
                db: '10.88'
            },
            {
                data: '语音服务(127.123.12.12)',
                dd: '98.6',
                wl: '38.26',
                db: '10.88'
            },
            {
                data: '客服服务(127.123.12.12)',
                dd: '98.6',
                wl: '38.26',
                db: '10.88'
            }
        ]);


        const data: any = reactive({
            chartLin1: null,
            chartLin2: null,
            chartLin3: null,
            // 导出图片
            saveImg: () => {
                data.chartLin1.saveImage('云端服务整体性能趋势（可用性）');
                data.chartLin2.saveImage('云端服务整体性能趋势（网络时延）');
                data.chartLin3.saveImage('云端服务整体性能趋势（丢包率）');
            }
        });

        onMounted(() => {
            bus.on('dropdownImg', (e: any) => {
                data.saveImg();
            });
        });
        // 销毁bus
        onUnmounted(() => {
            bus.off('dropdownImg');
        });

        return {
            arriveDataList,
            lossDataList,
            asdDataList,
            lossXName,
            lossLegendName,
            tableConfig,
            tableData,
            ...toRefs(data)
        };
    }
});
</script>

<style lang="" scoped>
</style>